<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <mycom1></mycom1>
    </div>

    <script type="text/javascript">
      // 1. 组件可以有自己的 data 数据
      // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
      // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
      // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
      Vue.component("mycom1", {
        template: "<h1>这是全局组件 ---{{ msg }}</h1>", // 组件的html结构
        // 组件mycom1类似vm  template指定控制区域作用类似el 在组件的data中保存了template控制区域数据
        // 类似MVVM中的Model
        data: function() {
          return {
            msg: "这是组件的中data定义的数据"
          };
        }
      });

      // 类比vm实例 el 指定控制区域为div#app  mycom1指定控制区域为template(组件结构规则必须被一个根元素包裹)

      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
      });
    </script>
  </body>
</html>
